<#ftl output_format="HTML" >
<#import "/layout.ftl" as layout>
<#import "/page.ftl" as pageTemplate>
<@layout.masterTemplate navIndex=1 >
<#assign allModules = { '1': '公告', '2': '介绍' }>
<div class="card mt-4 mb-4" >
    <form id="queryForm" class="card-body">
        <div class="form-inline mb-2">
            <div class="form-group">
                <label for="title" class="sr-only">标题：</label>
                <@spring.formInput "form.title" 'class="form-control mr-2" style="width:20em" maxlength="20" placeholder="标题" autofocus' 'search' />
            </div>
            <div class="form-group">
                <label for="module" class="sr-only">模块：</label>
                <@spring.formSingleSelect "form.module" allModules 'class="form-control mr-2" placeholder="模块"' />
            </div>
            <div class="form-group">
                <button type="submit" id="query" class="btn btn-primary">查询</button>
            </div>
        </div>
        <div class="form-inline">
            <button type="button" id="create" class="btn btn-info mr-2">创建</button>
            <button type="button" id="delete" class="btn btn-warning mr-2">删除</button>
        </div>
    </form>
</div>
<div class="table-responsive" >
<table class="as-table table table-hover table-striped table-condensed">
<tr>
    <th class="text-right">ID</th>
    <th class="text-center">标题</th>
    <th class="text-center">描述</th>
    <th class="text-center">权限</th>
    <th class="text-center">模块</th>
    <th class="text-center">启用</th>
</tr>
<#list categories as category>
<tr id="r${category.id}">
    <td class="text-right"><label for="cb${category.id}" ><input type="checkbox" name="categorySel" value="${category.id}" id="cb${category.id}" data-id="${category.id}" />&nbsp;${category.id}</label></td>
    <td class="text-center"><a href="<@spring.url '/category/${category.id}'/>" data-tooltip="${category.title?js_string}" style="max-width:40em" class="as-literal" >${category.title}</a></td>
    <td class="text-center"><span style="max-width:30em" class="as-literal" data-tooltip="${category.description?js_string}" >${category.description}</span></td>
    <td class="text-center"><span style="max-width:16em" class="as-literal" data-tooltip="${category.authority?js_string}" >${category.authority}</span></td>
    <td class="text-center">
<#if category.module == 1>
        <span class="badge badge-info">公告</span>
<#elseif category.module == 2>
        <span class="badge badge-info">介绍</span>
<#else>
        <span class="badge badge-warning">未知</span>
</#if>
    </td>
    <td class="text-center">
<#if category.enabled>
        <svg class="text-success" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z" clip-rule="evenodd"/>
          <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h10a1.5 1.5 0 0 0 1.5-1.5V8a.5.5 0 0 0-1 0v5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 3v10z" clip-rule="evenodd"/>
        </svg>
</#if>
    </td>
</tr>
</#list>
</table>
</div>
<@pageTemplate.page startRowIndex=page.startRowIndex maximumRows=20 totalCount=categoryCount />
<script type="text/javascript">
'use strict';
let baseUrl = '<@spring.url "/category" />';
$('#queryForm').submit(evt => {
    let newUrl = baseUrl + '/index(' + combineArgs(['title', 'module']) + ')';
    location.href = newUrl + '?_t=' + new Date().getTime();
    evt.preventDefault();
});
$('#create').click(evt => {
    location.href = baseUrl + '/create';
});
$('#delete').click(evt => {
    let selection = getSelectionByName('categorySel');
    let btn = this;
    if (selection.length > 0) {
        let idArray = selection.join(',');
        if (confirm('确认删除栏目【' + idArray + '】？此操作无法撤销！')) {
            btn.disabled = true;

            let url = baseUrl + '/' + selection.join(',');
            rpcDelete({url: url})
            .then(() => reloadPage(true))
            .finally(() => btn.disabled = false);
        }
    }
});
</script>
</@layout.masterTemplate>
